<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文档/文本/图片</title>
    <!-- 引入Tailwind CSS -->
    <!-- <script src="static/js/tailwind.3.4.17.js"></script> -->
    <link href="static/css/tailwind3.4.17.css" rel="stylesheet">     
    <!-- 引入Font Awesome图标 -->
    <link href="static/css/font-awesome.min.4.7.0.css" rel="stylesheet">
    <!-- 引入Vue 3 -->
    <script src="static/js/vue3.4.15.global.min.js"></script>

    <style lang="css">
        /* 标签页样式 - 由Vue的v-if控制显示，不需要额外的CSS显示控制 */
        .tab-content {
            /* 样式保持但不控制显示/隐藏 */
        }
        
        .tab-link.tab-active {
            color: #165DFF;
            border-bottom: 2px solid #165DFF;
        }
        
        /* 文本截断样式 */
        .uploaded-files-list {
            width: 100%;
            max-width: 100%;
        }
        

    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <div id="app">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex h-16">
                <div class="flex items-center">
                    <span class="text-primary text-xl font-bold flex items-center">
                        <i class="fa fa-wrench mr-2"></i>
                        信息系统
                    </span>
                </div>
                <div class="flex-grow"></div> <!-- 用于占据中间的空间 -->
                <div class="flex items-center space-x-4">
                    <a href="/query" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-search mr-1"></i> 查询
                    </a>
                </div>                
                <div class="flex items-center space-x-4">
                    <a href="/upload" class="text-primary  hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom bg-primary/10">
                        <i class="fa fa-upload mr-1"></i> 上传
                    </a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="/category_page" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-regular fa-list mr-1"></i> 分类
                    </a>
                </div>
                <!-- <div class="flex items-center space-x-4">
                    <a href="/history_page" class="text-secondary hover:text-primary/90 px-3 py-2 rounded-md text-sm font-medium transition-custom ">
                        <i class="fa fa-history mr-1"></i> 历史
                    </a>
                </div>                   -->
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="bg-white rounded-xl shadow-soft p-6 md:p-8 mb-8 border border-gray-200 ">
            <h1 class="text-2xl md:text-3xl font-bold text-dark mb-6">信息上传</h1>

    <!-- 标签页导航 -->
    <div class="border-b border-gray-200 mb-6">
        <ul class="flex space-x-8">
            <li><a href="#tab-file" class="tab-link text-base  py-2 font-medium transition-custom text-gray-500 hover:text-primary" :class="tabClasses('file')" @click.prevent="switchTab('file')">文档</a></li>
            <li><a href="#tab-text" class="tab-link text-base  py-2 font-medium transition-custom text-gray-500 hover:text-primary" :class="tabClasses('text')" @click.prevent="switchTab('text')">文本</a></li>
            <li><a href="#tab-image" class="tab-link text-base  py-2 font-medium transition-custom text-gray-500 hover:text-primary" :class="tabClasses('image')" @click.prevent="switchTab('image')">图片</a></li>
            <li><a href="#tab-url" class="tab-link text-base  py-2 font-medium transition-custom text-gray-500 hover:text-primary" :class="tabClasses('url')" @click.prevent="switchTab('url')">网页URL</a></li>
        </ul>
    </div>

    <!-- 分类选择区域 - 在所有标签页间共享 -->
    <div class="mb-6 p-4 bg-gray-50 rounded-md border border-gray-200">
        <label for="category-select" class="block text-sm font-medium text-gray-700 mb-2">选择分类:</label>
        <select id="category-select" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" v-model="selectedCategory">
            <option v-for="category in categories" :key="category.name" :value="category.name">
                {{ category.name }}{{ category.desc ? ` - ${category.desc}` : '' }}
            </option>
        </select>
    </div>

    <!-- 标签页内容 -->
    <div class="tab-content-wrapper">
        <!-- 文件上传标签页 -->
        <div id="tab-file-content" class="tab-content" v-if="activeTab === 'file'">
            <form id="fileUploadForm">
                <div class="form-group border border-gray-200 rounded-md p-4">
                    <label for="file" class="mr-2">选择文档:</label>
                    <input type="file" id="file" name="file" multiple @change="onFileChange">
                    <p class="mt-1 text-xs text-gray-500">支持的文件格式: .txt, .pdf, .docx, .md, .xlsx, .xls</p>
                </div>
                <!-- 容器使用flex布局，在中等屏幕以上水平排列，移动端垂直排列 -->
                <div class="flex flex-col md:flex-row pt-4 w-full">
                    <div id="fileStatus" class="flex items-center justify-start mr-4 text-left text-sm" v-if="fileStatus" :class="statusBackgroundClass(fileStatusColor)">{{ fileStatus }}</div>
                    <!-- 显示上传的文件信息 -->
                    <div v-if="uploadedFiles.length > 0" class="w-full mt-4">
                        <h4 class="font-medium mb-2">已上传的文件:</h4>
                        <ul class="text-sm space-y-1">
                            <li v-for="(file, index) in uploadedFiles" :key="index" class="p-2 bg-gray-50 rounded border border-gray-200">
                                <span class="font-small">原始文件名:</span> {{ file.original_name }}<br>
                                <!-- <span class="font-medium">保存的文件名:</span> {{ file.saved_name }}<br> -->
                                <!-- <span class="font-medium">保存路径:</span> uploads/{{ selectedCategory }}/docs/{{ file.saved_name }} -->
                            </li>
                        </ul>
                    </div>
                    <button
                        type="button"
                        class="px-6 py-1 border border-transparent font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom w-full sm:w-auto sm:ml-auto"
                        :disabled="fileUploading"
                        @click="uploadFiles"
                    >
                        <i class="fa fa-upload mr-2"></i> {{ fileUploading ? '上传中...' : '上传文档' }}
                    </button>
                </div>
            </form>
        </div>

        <!-- 文本嵌入标签页 -->
        <div id="tab-text-content" class="tab-content" v-if="activeTab === 'text'">
            <form id="textEmbeddingForm">
                <div class="form-group border border-gray-200 rounded-md p-4 w-full">
                    <label for="textContent" class="block mb-2">文本内容:</label>
                    <textarea id="textContent" name="textContent" rows="3" class="w-full p-2 border border-gray-300 rounded-md" placeholder="请输入要嵌入的文本内容..." v-model="textContent"></textarea>
                </div>
                <!-- 容器使用flex布局，在中等屏幕以上水平排列，移动端垂直排列 -->
                <div class="flex flex-col md:flex-row pt-4 w-full">
                    <div id="textStatus" class="flex items-center justify-start mr-4 text-left text-sm" v-if="textStatus" :class="statusBackgroundClass(textStatusColor)">{{ textStatus }}</div>
                    <!-- 显示保存的文本文件信息 -->
                    <div v-if="savedTextFiles.length > 0" class="w-full mt-4">
                        <h4 class="font-medium mb-2">已保存的文本文件:</h4>
                        <ul class="text-sm space-y-1">
                            <li v-for="(file, index) in savedTextFiles" :key="index" class="p-2 bg-gray-50 rounded border border-gray-200">
                                <span class="font-medium">保存的文件名:</span> {{ file.saved_name }}<br>
                                <!-- <span class="font-medium">保存路径:</span> uploads/{{ selectedCategory }}/txts/{{ file.saved_name }} -->
                            </li>
                        </ul>
                    </div>
                    <button
                        type="button"
                        class="px-6 py-1 border border-transparent font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom w-full sm:w-auto sm:ml-auto"
                        :disabled="textEmbedding"
                        @click="embedText"
                    >
                        <i class="fa fa-save mr-2"></i> {{ textEmbedding ? '嵌入中...' : '上传文本' }}
                    </button>
                </div>
            </form>
        </div>

        <!-- 图片嵌入标签页 -->
        <div id="tab-image-content" class="tab-content" v-if="activeTab === 'image'">
            <form id="imageEmbeddingForm">
                <div class="form-group border border-gray-200 rounded-md p-4">
                    <label for="imageFile" class="mr-2">选择图片:</label>
                    <input type="file" id="imageFile" name="imageFile" accept="image/*" multiple @change="onImageChange">
                </div>
                <label for="imageDescription" class="block mt-4 mb-2">图片描述:</label>
                <textarea id="imageDescription" name="imageDescription" rows="3" class="w-full p-2 border border-gray-300 rounded-md" placeholder="请输入图片描述..." v-model="imageDescription"></textarea>
                <!-- 容器使用flex布局，在中等屏幕以上水平排列，移动端垂直排列 -->
                <div class="flex flex-col md:flex-row pt-4 w-full">
                    <div id="imageStatus" class="flex items-center justify-start mb-4 text-left text-sm" v-if="imageStatus" :class="statusBackgroundClass(imageStatusColor)">{{ imageStatus }}</div>
                    <!-- 显示上传的图片信息 -->
                    <div v-if="uploadedImages.length > 0 && !imageEmbedding" class="w-full mb-4">
                        <h4 class="font-medium mb-2">已上传的图片:</h4>
                        <ul class="uploaded-files-list text-sm space-y-1">
                            <li v-for="(image, index) in uploadedImages" :key="index" class="uploaded-file-item p-2 bg-gray-50 rounded border border-gray-200">
                                <span class="font-medium">原始文件名:</span> <span>{{ image.original_name }}</span><br>
                                <!-- <span class="font-medium">保存的文件名:</span> {{ image.saved_name }}<br> -->
                            </li>
                        </ul>
                    </div>
                    <button
                        type="button"
                        class="px-6 py-1 border border-transparent font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom w-full sm:w-auto sm:ml-auto"
                        :disabled="imageEmbedding"
                        @click="embedImage"
                    >
                        <i class="fa fa-image mr-2"></i> {{ imageEmbedding ? '上传中...' : '上传图片' }}
                    </button>
                </div>
            </form>
        </div>
        
        <!-- 网页URL标签页内容 -->
        <div id="tab-url-content" class="tab-content" v-if="activeTab === 'url'">
            <form id="urlParsingForm">
                <div class="form-group border border-gray-200 rounded-md p-4 w-full">
                    <label for="webUrl" class="block mb-2">网页URL:</label>
                    <textarea id="webUrl" name="webUrl" rows="5" class="w-full p-2 border border-gray-300 rounded-md" placeholder="请输入网页URL地址，每行一个URL，例如：
https://example.com
https://another-example.com" v-model="webUrls"></textarea>
                    <p class="mt-1 text-xs text-gray-500">支持多行输入，每行一个URL</p>
                </div>
                <!-- 容器使用flex布局，在中等屏幕以上水平排列，移动端垂直排列 -->
                <div class="flex flex-col md:flex-row pt-4 w-full">
                    <div id="urlStatus" class="flex items-center justify-start mr-4 text-left text-sm" v-if="urlStatus" :class="statusBackgroundClass(urlStatusColor)">{{ urlStatus }}</div>
                    <!-- 显示解析的URL内容信息 -->
                    <div v-if="parsedUrls.length > 0" class="w-full mt-4">
                        <h4 class="font-medium mb-2">已解析的URL内容:</h4>
                        <ul class="text-sm space-y-1">
                            <li v-for="(url, index) in parsedUrls" :key="index" class="p-2 bg-gray-50 rounded border border-gray-200">
                                <span class="font-medium">原始URL:</span> {{ url.original_url }}<br>
                                <!-- <span class="font-medium">保存的文件名:</span> {{ url.saved_name }}<br> -->
                                <!-- <span class="font-medium">保存路径:</span> uploads/{{ selectedCategory }}/urlcontents/{{ url.saved_name }} -->
                            </li>
                        </ul>
                    </div>
                    <button
                        type="button"
                        class="px-6 py-1 border border-transparent font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom w-full sm:w-auto sm:ml-auto"
                        :disabled="urlParsing"
                        @click="parseWebUrls"
                    >
                        <i class="fa fa-globe mr-2"></i> {{ urlParsing ? '解析中...' : '解析网页' }}
                    </button>
        </div>
    </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm text-gray-500">个人信息系统 © 2025</p>
        </div>
    </footer>

    <!-- 移动端菜单按钮 -->
    <button id="mobileMenuBtn" class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg z-50 md:hidden" @click="toggleMobileMenu">
        <i class="fa fa-bars"></i>
    </button>
    
    <!-- 错误提示组件 -->
    <div v-if="showError" class="fixed top-6 right-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg shadow-lg z-50 max-w-xs">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i class="fa fa-exclamation-circle"></i>
                <span>{{ errorMessage }}</span>
            </div>
            <button @click="closeError" class="text-red-500 hover:text-red-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
    </div>
    
    </div>

    <!-- 引入外部JavaScript文件 -->
    <script src="static/js/upload.js"></script>
</body>
</html>